<template>
	<view style="background-color:#F6F6F6 ;min-height: 100vh;">
		<view class="tabs">
			<liuyuno-tabs :tabData="tabs" :activeIndex="selectTabIndex" :config="{
					color: '#999',
					activeColor: '#FE7904',
					underLineColor: '#FE7904'
				}" @tabClick="selectTab" />
		</view>
		<view style="margin-top: 20rpx;">
			<empty v-if="orderlist.length === 0">暂无订单</empty>
			<view v-else class="swiper-item">
				<view v-for="item in orderlist" :key="item.id" class="order-item-card"
					@click="orderdetail(item.orderNo)">
					<view class="order-no-top">
						<view class="order-no">{{ item.orderNo }}</view>
						<view class="order-status">{{ item.statusName }}</view>
					</view>
					<view class="order-item-top">
						<!-- <scroll-view class="order-container" scroll-x="true"> -->
						<view class="order-detail flexr align-start" v-for="(child, index) in item.mallProductOrderItemList"
							:key="index">
							<view class="head-img" :src="child.productImg"
								:style="{ backgroundImage: 'url( ' + child.productImg + ' )' }"></view>
							<view class="order-item-content-text flex-1 flexr">
								<view class="chide-product-name eltwo">{{ child.productName }}</view>
								<view>
									<text style="color: #333;display: block;font-weight: bold;"><text style="font-size: 15rpx;font-weight: normal;">¥</text>{{ child.productPrice | moneyFormat(2) }}</text>
									<text style="margin-left: 10rpx; font-size:24rpx;display: block;">x{{ child.num }}</text>
								</view>
							</view>
						</view>
						<!-- </scroll-view> -->
					</view>
					<view class="order-price">
						<text class="order-item-number">共{{ item.mallProductOrderItemList.length }}件商品,运费{{item.expressPrice| moneyFormat(2)}}</text>
						<text>实付款</text>
						<text class="order-price-unit">￥</text>
						<text>{{ item.totalPrice | moneyFormat(2) }}</text>
					</view>
					<view class="order-operation-container">
						<view class="order-btn zhifu-btn" v-if="item.status == 1" @click.stop="gopayorder(item)">去支付
						</view>
						<view class="order-btn pinglun-btn" v-if="item.status == 3"
							@click.stop="updateOrder(item.orderNo, 40)">确认收货</view>
						<view class="order-btn quxiao-btn" v-if="item.status == 1"
							@click.stop="updateOrder(item.orderNo, -10)">取消订单</view>
						<view class="order-btn xiangqing-btn">订单详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isLogin,
		toLogin,
		formatDate
	} from '@/config/common.js';
	import {
		getAppMyStoreOrderInfoList,
		updateStoreOrderStatus,
		orderCancel
	} from '@/constant/mall.js';
	export default {
		components: {},
		data() {
			return {
				selectTabIndex: 0,
				orderlist: [],
				tabs: [{
						id: 1,
						name: '全部',
						status: ''
					},
					{
						id: 2,
						name: '待付款',
						status: '1'
					},
					{
						id: 3,
						name: '待服务',
						status: '2'
					},
					{
						id: 4,
						name: '待评价',
						status: '4'
					}
				],
				query_filter: {
					// storeOrderStatus: '',
					// keyWord: '',
					// customerId: uni.getStorageSync('customerId'),
					pageNum: 1,
					pageSize: 10,
					"status": "",
					"keyWords": "",
					"isAsc": "asc"
				},
				orderNo: ''
			};
		},
		onLoad: function(option) {
			if (isLogin()) {
				this.getOrderList(this.query_filter);
			} else {
				toLogin();
			}
		},
		onReachBottom() {
			this.query_filter.pageNum++;
			this.getOrderList(this.query_filter);
		},
		onPullDownRefresh() {
			this.query_filter.pageNum = 1;
			this.initData();
		},
		methods: {
			async selectTab(index) {
				// this.tabs = this.tabs.map(e => {
				// 	e.active = false;
				// 	return e;
				// });
				// this.tabs[index].active = true;
				this.selectTabIndex = index;
				this.query_filter.status = this.tabs[index].status;
				this.query_filter.pageNum = 1;
				let res = await getAppMyStoreOrderInfoList(this.query_filter);
				this.orderlist = res.data.list;
			},
			initData() {
				this.query_filter.pageNum = 1;
				this.orderlist = []
				this.getOrderList(this.query_filter);
			},
			async getOrderList() {
				//订单列表
				let res = await getAppMyStoreOrderInfoList(this.query_filter);
				let data = res.data.list
				console.log(data, 'res-------')
				uni.stopPullDownRefresh();
				if (this.query_filter.pageNum > 0) {
					for (let i = 0; i < data.length; i++) {
						let obj = data[i];
						this.orderlist.push(obj);
					}
				} else {
					this.orderlist = data;
				}
			},
			async gopayorder(orderInfo) {
				//支付

				uni.navigateTo({
					url: '/pages/payorder/index?orderNo=' + orderInfo.OrderNo + '&orderType=30' +
						'&orderAmount=' + orderInfo.totalPrice
				});
			},
			async updateOrder(orderId, orderStatus) {
				//取消订单
				let that = this;
				uni.showModal({
					title: '',
					content: orderStatus == -10 ? '确认取消' : '确认收货',
					success: function(res) {
						if (res.confirm) {
							if (orderStatus == -10) {
								that.confirmUpdateOrder(orderId, orderStatus);
							} else {
								// 确认收货
							}

						}
					}
				});
			},

			async confirmUpdateOrder(orderId, orderStatus) {
				await orderCancel({
					orderNo: orderId,
					type: 4
				});
				uni.showToast({
					title: orderStatus == -10 ? '取消成功' : '确认成功',
					icon: 'none'
				});
				setTimeout(() => {
					this.initData();
				}, 1000);
			},
			orderdetail(orderNo) {
				uni.navigateTo({
					url: './detail?orderNo=' + orderNo
				});
			}
		}
	};
</script>

<style>
	@import url('../../../css/common.css');
</style>
<style lang="scss">
	.tabs {
		// height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		display: flex;
		background-color: #fff;
	}

	.swiper-item {
		padding: 20rpx 30rpx;
	}

	.no-order {
		height: 240rpx;
		line-height: 240rpx;
		text-align: center;
		background-color: #fff;
		color: #acacac;
	}

	.order-item-card {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		// box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

		.order-no-top {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			color: $main-text-color-gray-33;

			.order-status {
				color: $main-text-color-main-orange;
			}
		}

		.order-item-top {

			// display: flex;
			.head-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}

			.order-detail {
				padding: 20rpx 0;
				// width: 33%;
				// display: inline-block;
			}

			.order-container {
				white-space: nowrap;



			}
		}

		.order-price {
			color: #333;
			font-size: $main-text-size-28;
			text-align: right;
			margin-bottom: 20rpx;
			

			.order-item-number {
				color: #8A8A8A;
				font-size: $main-text-size-28;
				margin-right: 20rpx;
			}

			&-unit {
				font-size: $main-text-size-20;
			}
		}

		.order-operation-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
		}
	}

	.play-order-info-item .title::after {
		content: '：';
	}
	.order-item-content-text{
		margin-left: 20rpx;
	}

	.chide-product-name {
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		width: 90%;
		font-size: 28rpx;
		line-height: 40rpx;
		height: 80rpx;
	}
</style>